<template>
  <el-dialog title="选择部件" v-model="dialogVisible" width="80%" style="margin-top: 40px" >
    <el-form
      ref="formRef"
      :model="queryParams"
      label-width="110px"
      :inline="true"
    >
      <el-form-item label="清单编号" prop="prepareNumber">
        <el-input @keyup.enter="getList" class="!w-220px" v-model="queryParams.prepareNumber" placeholder="请输入清单编号" />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input @keyup.enter="getList" class="!w-220px"  v-model="queryParams.productNumber" placeholder="请输入产品编号" />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary"> 搜索</el-button>
        <el-button @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      v-loading="formLoading"
      ref="multipleTableRef"
      :data="list"
      @selection-change="handleSelectionChange"
      :height="contentHeight * 0.75"
      row-key="id"
    >
      <el-table-column type="selection" :reserve-selection="true" />
      <el-table-column label="清单编号" header-align="left" align="left" prop="prepareNumber" />
      <el-table-column label="产品编号" header-align="left" align="left" prop="productNumber" />
      <el-table-column label="部件编码" header-align="left" align="left" prop="partNumber" />
      <el-table-column label="部件名称" header-align="left" align="left" prop="partName" />
      <el-table-column label="部件规格" header-align="left" align="left" prop="partSpecification" />
      <el-table-column label="备货剩余数量" header-align="left" align="left" prop="prepareRemaQuantity" />
      <el-table-column label="单位" header-align="left" align="left" prop="partUnit" />
      <!-- <el-table-column label="入库类型" header-align="left" align="left" prop="dictIncomingType" >
        <template #default=scope>
          <dict-tag type="incoming_type" :value="scope.row.dictIncomingType" />
        </template>
      </el-table-column> -->
      <el-table-column label="仓库名称" header-align="left" align="left" prop="warehouseName" />
      <el-table-column label="创建人" header-align="left" align="left" prop="creatorName" />
      <el-table-column label="创建时间" header-align="left" align="left" prop="createTime" />
    </el-table>
    <div class="mb-10">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import * as ComponentApi from '@/api/componentApi/index'

const dialogVisible = ref(false)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  prepareId: 0,
  prepareNumber: undefined,
  productNumber: undefined
})

const formRef = ref()
const formLoading = ref(false)
const total = ref(0)  //部件总数
const list = ref([])  //部件列表
const multipleTableRef = ref()
const multipleSelection = ref<Object[]>([]) //多选数据
const contentHeight = ref(0)

/** 重置按钮操作 */
const resetQuery = () => {
  formRef.value.resetFields()
  getList()
}

// 打开弹窗
const open = async (arr: Object[], prepareId: number) => {
  queryParams.prepareId = prepareId
  dialogVisible.value = true
  nextTick(() => {
    arr.map(item => {
      list.value.map(val => {
        if (val['id'] === item['sourceId']) {
          multipleTableRef.value.toggleRowSelection(val, true)
        }
      })
    })
    contentHeight.value = document.body.clientHeight - 125
  })
  await getList()
  
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 获取数据
const getList = async () => {
  formLoading.value = true
  try {
    const res = await ComponentApi.getProductionShipmentsPartsList(queryParams)
    list.value = res.list
    total.value = res.total
  } finally {
    formLoading.value = false
  }
}

// 多选
const handleSelectionChange = (val: Object[]) => {
  multipleSelection.value = val
}

const emit = defineEmits(['setParts'])
// 确定
const submitForm = () => {
  dialogVisible.value = false
  emit('setParts', multipleSelection.value)
  reset()
}

// 重置数据
const reset = () => {
  multipleTableRef.value!.clearSelection()
  formRef.value.resetFields()
  multipleSelection.value = []
}
</script>
